<template>
  <div class='learn-view'>
    <van-nav-bar
      title="已购课程"
    />
    <van-cell-group inset class="lessons">
      <van-cell v-for="lesson in lessons" :key="lesson.id">
        <img :src="lesson.image" alt="">
        <div class="info">
          <div class="name">{{lesson.name}}</div>
          <div class="brief">{{lesson.previewFirstField}}</div>
        </div>
      </van-cell>
    </van-cell-group>
    <tab-menu></tab-menu>
  </div>
</template>

<script>
import TabMenu from '@/components/tabmenu.vue';
// eslint-disable-next-line
import { getPurchaseCourse } from '@/services/course';

export default {
  name: 'LearnView',
  components: {
    TabMenu,
  },
  data() {
    return {
      lessons: [],
    };
  },
  created() {
    this.loadCourse();
  },
  methods: {
    async loadCourse() {
      const { data } = await getPurchaseCourse();
      if (data.state === 1) {
        this.lessons = data.content;
      }
    },
  },
};
</script>

<style lang='less' scoped>
::v-deep .van-nav-bar__title {
  font-size: 24px;
  font-weight: 600;
}
.lessons {
  margin: 15px;
}
.lessons .van-cell__value {
  display: flex;
}
.lessons img {
  display: block;
  width: 62px;
  height: 82px;
}
.lessons .info {
  padding-left: 15px;
}
.lessons .info .name {
  font-size: 16px;
}
.lessons .info .brief {
  font-size: 12px;
}
</style>
